<template>
    <div class="madp-product-list">
        <div class="header">
            <el-tabs v-model="tabIdx" tab-position="top" class="tabs-menu">
                <el-tab-pane label="理财" name="11"></el-tab-pane>
                <el-tab-pane label="基金" name="12"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="container">
            <mescroll-view class="scroll-view" :showMoreBtn="page.total > page.current * page.size" :total="page.total" @getMoreData="getMoreData">
                <div class="container-list">
                    <template v-if="tabIdx == 11">
                        <financial-licai-item v-for="(item, idx) in list" :info="item" :key="idx"></financial-licai-item>
                    </template>
                    <template v-else>
                        <div class="container-list-form">
                            <div class="container-list-group">
                                <div :class="{ is_active: item.id == activeGroupId }" class="container-list-group-item" v-for="(item, index) in groupList" :key="index" @click="handleGroup(item)">
                                    {{ item.name }}
                                </div>
                            </div>
                            <div class="container-list-type" v-show="typeList.length > 0">
                                <div :class="{ is_active: item.id == activeTypeId }" class="container-list-type-item" v-for="(item, index) in typeList" :key="index" @click="handleType(item)">
                                    {{ item.name }}
                                </div>
                            </div>
                            <div class="container-list-input">
                                <el-input v-model="searchStr" @change="searchFn"></el-input>
                                <i class="el-icon-search"></i>
                            </div>
                        </div>
                        <div class="container-list-content">
                            <el-empty v-if="list.length < 1" :image="require('@/assets/img/no-todo.png')" :description="tabIdx == 11 ? '暂无理财产品' : '暂无基金产品'"></el-empty>
                            <financial-jijin-item v-for="(item, idx) in list" :info="item" :key="idx"></financial-jijin-item>
                        </div>
                    </template>
                </div>
            </mescroll-view>
        </div>
        <back-btn />
    </div>
</template>
<script>
    import MescrollView from '@/components/material/mescroll-view.vue';
    import FinancialLicaiItem from '@/components/financial-shop/financial-licai-item.vue';
    import FinancialJijinItem from '@/components/financial-shop/financial-jijin-item.vue';
    import financialApi from '@/api/financial-shop.js';
    import * as formatDataUtils from '@/utils/cds.js';
    import backBtn from '@/components/back-btn.vue';
    export default {
        name: 'madp-product-list',
        components: { MescrollView, backBtn, FinancialLicaiItem, FinancialJijinItem },
        data() {
            return {
                formatDataUtils,
                wxUserId: '',
                tabIdx: '11',
                list: [],
                allLicaiList: [],
                page: {
                    current: 1,
                    size: 10,
                    total: 0
                },
                groupList: [
                    {
                        name: '全部',
                        id: 0
                    },
                    {
                        name: '股票型',
                        id: 1
                    },
                    {
                        name: '混合型',
                        id: 3
                    },
                    {
                        name: '债券型',
                        id: 2
                    },
                    {
                        name: '货币型',
                        id: 4
                    }
                ],
                typeList: [
                    {
                        name: '全部',
                        id: 0
                    },
                    {
                        name: '低风险',
                        id: 1
                    },
                    {
                        name: '中低风险',
                        id: 2
                    },
                    {
                        name: '中风险',
                        id: 3
                    },
                    {
                        name: '中高风险',
                        id: 4
                    },
                    {
                        name: '高风险',
                        id: 5
                    }
                ],
                activeGroupId: 0,
                activeTypeId: 0,
                searchStr: ''
            };
        },
        watch: {
            tabIdx: {
                handler(cur, pre) {
                    if (cur === pre) return;
                    this.list = [];
                    this.page.current = 1;
                    this.getList();
                }
            }
        },
        created() {},
        activated() {
            this.list = [];
            this.wxUserId = this.$route.query.wxUserId;
            this.page.current = 1;
            this.getList();
        },
        methods: {
            getMoreData() {
                this.page.current++;
                this.getList();
            },
            intoDetail(info) {
                if (info.type == 12) {
                    // 基金
                    this.$router.push({
                        path: '/financialShop/financial-fund-detail',
                        query: {
                            id: info.id,
                            radar_type_code: '02',
                            radar_code: info.id,
                            radar_name: info.name
                        }
                    });
                } else {
                    // 理财
                    this.$router.push({
                        path: '/financialShop/financial-detail',
                        query: {
                            id: info.id,
                            radar_type_code: '01',
                            radar_code: info.id,
                            radar_name: info.name
                        }
                    });
                }
            },
            getList() {
                if (this.tabIdx == 12) {
                    this.getProductList();
                } else {
                    if (this.allLicaiList.length < 1) {
                        this.getProductLicaiList(() => {
                            if (this.page.current == 1) {
                                this.list = this.allLicaiList.slice(this.page.current - 1, this.page.size);
                            } else {
                                this.list.push(...this.allLicaiList.slice(this.page.current - 1, this.page.size));
                            }
                            this.page.total = this.allLicaiList.length;
                            this.$forceUpdate();
                        });
                    } else {
                        if (this.page.current == 1) {
                            this.list = this.allLicaiList.slice(this.page.current - 1, this.page.size);
                        } else {
                            this.list.push(...this.allLicaiList.slice(this.page.current - 1, this.page.size));
                        }
                        this.page.total = this.allLicaiList.length;
                        this.$forceUpdate();
                    }
                }
            },
            getProductList() {
                let params = {
                    current: this.page.current,
                    size: this.page.size,
                    type: this.tabIdx,
                    wxUserId: this.wxUserId
                };
                if (this.activeGroupId) params.prdAttr = this.activeGroupId;
                if (this.activeTypeId) params.riskLevel = this.activeTypeId;
                if (this.searchStr) params.searchStr = this.searchStr;
                financialApi.getProductMoreList(params).then((res) => {
                    if (this.page.current == 1) {
                        this.list = res.data.data.records;
                    } else {
                        this.list.push(...res.data.data.records);
                    }
                    this.page.total = res.data.data.total;
                    this.$forceUpdate();
                });
            },
            // 获取理财列表数据 全部
            getProductLicaiList(cb) {
                financialApi
                    .getProductLicaiList({
                        wxUserId: this.wxUserId
                    })
                    .then((res) => {
                        this.allLicaiList = res.data.data;
                        this.page.total = this.allLicaiList.length;
                        cb && cb();
                    });
            },
            // 选择基金类型
            handleGroup(data) {
                if (this.activeGroupId != data.id) {
                    this.activeGroupId = data.id;
                    this.activeTypeId = 0;
                    this.page.current = 1;
                    this.getList();
                }
            },
            // 选择风险等级
            handleType(data) {
                if (this.activeTypeId != data.id) {
                    this.activeTypeId = data.id;
                    this.page.current = 1;
                    this.getList();
                }
            },
            // 根据输入内容搜索基金
            searchFn() {
                this.list = [];
                this.page.current = 1;
                this.getList();
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-product-list {
        width: 100%;
        min-height: 100vh;
        background-position: 0% 0%;
        background-size: 100%;
        background-repeat: no-repeat;
        background-image: url('../../assets/img/financialShop/detailbg.png');
        background-color: #f9f9f9;
        .back-btn {
            font-size: 25px;
            color: #fff;
            position: fixed;
            top: 10px;
            left: 6px;
        }
        .header {
            background-color: #ffffff;
            .tabs-menu {
                width: 100%;
                /deep/.el-tabs__header {
                    margin: 0;
                }
                /deep/.el-tabs__nav {
                    width: 50%;
                    .el-tabs__item {
                        padding: 0;
                        width: 100%;
                        text-align: center;
                        font-size: 16px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 600;
                        color: rgba(44, 44, 44, 0.5);
                    }
                    .is-active {
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 600;
                        color: #2c2c2c;
                    }
                    .el-tabs__active-bar {
                        width: 16px !important;
                        height: 4px;
                        margin: 0 calc(50% - 8px);
                        background: #ed5555;
                        border-radius: 8px;
                    }
                    .el-tabs__nav-wrap::after {
                        background: none;
                    }
                }
                /deep/.el-tabs__nav-wrap::after {
                    background: none;
                }
            }
        }
        .container {
            background-color: #f9f9f9;
            padding: 10px 0;
            height: calc(100vh - 40px);
            .scroll-view {
                .container-list {
                    position: relative;
                    &-form {
                        position: fixed;
                        background: #fff;
                        z-index: 999;
                    }
                    &-content {
                        padding-top: 100px;
                    }
                    &-group {
                        overflow-x: auto;
                        display: flex;
                        overflow-y: hidden;
                        border-bottom: 1px solid #dcdfe6;
                        box-sizing: border-box;
                        &-item {
                            flex: 1;
                            min-width: fit-content;
                            margin: 0 12px;
                            text-align: center;
                            line-height: 30px;
                            font-size: 14px;
                            font-weight: 500;
                            color: rgba(44, 44, 44, 0.5);
                        }
                        .is_active {
                            position: relative;
                            color: #2c2c2c;
                            font-weight: 500;
                        }
                        .is_active:after {
                            content: '';
                            width: 24px;
                            height: 4px;
                            background: #ed5555;
                            border-radius: 2px;
                            position: absolute;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            margin: 0 auto;
                        }
                    }
                    &-type {
                        overflow-x: auto;
                        overflow-y: hidden;
                        display: flex;
                        box-sizing: border-box;
                        border-bottom: 1px solid #dcdfe6;
                        &-item {
                            min-width: fit-content;
                            padding: 4px 8px;
                            text-align: center;
                            font-size: 12px;
                            color: rgba(44, 44, 44, 0.5);
                            background: rgba(44, 44, 44, 0.04);
                            border-radius: 4px;
                            margin: 3px 4px;
                        }
                        .is_active {
                            position: relative;
                            color: #fff;
                            background: rgba(97, 173, 255, 1);
                        }
                    }
                    &-input {
                        width: 98%;
                        margin: 4px auto 0;
                        position: relative;
                        i {
                            position: absolute;
                            right: 12px;
                            top: 6px;
                            font-size: 14px;
                        }
                        /deep/ .el-input__inner {
                            height: 24px !important;
                            line-height: 24px !important;
                            border-radius: 12px !important;
                        }
                    }
                    .item {
                        margin-bottom: 5px;
                        background-color: #ffffff;
                        padding: 18px;
                        border-radius: 8px;
                        .name {
                            font-size: 15px;
                            font-weight: 500;
                            color: #202020;
                        }
                        .center {
                            display: flex;
                            align-items: center;
                            margin: 6px 0;
                            :nth-child(1) {
                                width: 50%;
                                font-size: 25px;
                                font-family: Roboto-Medium, Roboto;
                                font-weight: 500;
                                color: #ed5555;
                            }
                            :nth-child(2) {
                                font-size: 16px;
                                font-weight: 600;
                                color: #202020;
                            }
                        }
                        .bottom {
                            display: flex;
                            align-items: center;
                            :nth-child(1) {
                                width: 50%;
                                font-size: 13px;
                                font-weight: 400;
                                color: rgba(32, 32, 32, 0.4);
                            }
                            :nth-child(2) {
                                width: 50%;
                                font-size: 13px;
                                font-weight: 400;
                                color: rgba(32, 32, 32, 0.8);
                            }
                        }
                        .center1 {
                            margin: 0;
                            :nth-child(1) {
                                width: 30%;
                            }
                            :nth-child(2) {
                                width: 70%;
                            }
                        }
                        .bottom1 {
                            :nth-child(1) {
                                width: 30%;
                            }
                            :nth-child(2) {
                                width: 70%;
                            }
                        }
                    }
                }
            }
        }
    }
    .left_color1 {
        color: #ed5555 !important;
    }
    .left_color2 {
        color: #5ba764 !important;
    }
</style>
